<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新时代摄影</title>
    <link rel="stylesheet" href="works-add.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入axios框架-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>

    </style>
</head>
<body>
<!--头部布局开始-->
<header>
    <div class="cantainer">
        <div class="logo ">
            <a href=""><img src="http://www.shumasheying.org.cn/themes/index/public/assets/images/logo.png" alt=""></a>
        </div>
        <div class="header-right">


            <form action="">
                <input type="text" name="keyword" placeholder="搜索你喜欢的">
                <button type="button" @click="search()">
                    <i class="fa fa-search"></i>
                </button>

            </form>
            <div class="dc fl clearfix">
                <div class="fl xian" id="pa" onmouseover="a2()" onmouseout="b2()" style="margin-top: 2px; margin-right: 20px;padding-bottom: 10px;">
                    <a href="/centers.html" >
                        <img src="http://www.shumasheying.org.cn/themes/index/public/assets/images/tx.png" style="width: 25px; height: 25px; border-radius: 50%; overflow: hidden; margin-left: 10px;  background: #f5f5f5;">

                    </a>
                    <div id="pad" style="" class="dengyincang" >
                        <a class="tcl tca" href="/centers.html" style="">个人中心</a>
                        <a class="tcl tcd" href="/user/index/logout.html" style="" @click="logout()" >退出登录</a>
                    </div>

                </div>
                <!-- <button class="fl" style="width: 85px; height: 30px; color: #fff; background: #897e49; border: none; display: block;">发布作品</button> -->
                <a  href="/user/profile/works_add.html" class="fl fb" style="width: 85px; height: 30px; color: #fff; background: #897e49; display: block; padding: 5px 0px; text-align: center;">发布作品</a>

            </div>
        </div>
    </div>
</header>
<!--头部布局结束-->
<!--导航条布局开始-->
<nav class="flt">
    <div class="n-nav">
        <ul class="n-ul">
            <li class="Moveout"><a id="active" href="/">首页</a></li>
            <li v-for="c in c_arr" class="Moveout">
                <a  href="/activity.html">{{c.name}}</a>
            </li>
            <!-- <li class="Moveout"><a target="" href="/reflex.html">热门影展</a>
                 <ul class="li-yincang">
                 </ul>
             </li>
             <li class="Moveout"><a target="" href="/creation.html">摄影用品超市</a>
                 <ul class="li-yincang">
                 </ul>
             </li>-->
            <li class=" Moveout Mt"  id="Mt" onmouseover="Moveoutsover()" onmouseout="MoveoutSout()">
                <a target=""  href="">作品&amp;影展</a>
                <ul style="display: none" id="ct" class="li-yincang" >
                    <li><a href="/work.html">摄影作品</a></li>
                    <li><a href="/festival.html">在线影展</a></li>
                </ul>
            </li>
            <li class=" Moveout Mb"  id="Mb" onmouseover="Moveoutsover1()" onmouseout="MoveoutSout1()">
                <a target=""  href="">会员服务</a>
                <ul style="display: none"  id="cb" class="li-yincang" >
                    <li><a href="/camerist.html">会员细则</a></li>
                    <li><a href="/famous.html">著名摄影师</a></li>
                    <li><a href="/excellent.html">优秀摄影师</a></li>
                </ul>
            </li>
            <li class=" Moveout Mc"  id="Mc" onmouseover="Moveoutsover2()" onmouseout="MoveoutSout2()">
                <a target=""  href="">关于我们</a>
                <ul style="display: none" id="cd"  class="li-yincang" >
                    <li><a href="/summary.html">新时代简介</a></li>
                    <li></li><a href="/about.html">联系我们</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<!--导航条布局结束-->
<section>
<div class="baner">
    <div class="container">
        <div class="xinxi ">
            <div class="touxiang fl">
                <a href="/datum.html">
                    <img src="http://www.shumasheying.org.cn/themes/index/public/assets/images/tx.png">
                </a>
            </div>
            <div class="geren fl">
                <div class="geren-top ">
                    <div class="name fl">蒋彬承</div>
                </div>
                <div class="fensi">
                    <a href="/user/profile/user_fans.html" id="id_user_fans">关注0</a><span>|</span>
                    <a href="/user/profile/fans.html" id="id_fans">粉丝0</a>
                </div>
                <p>暂无个性签名</p>
            </div>
        </div>
    </div>
</div>
    <nav>
        <ul style="width: 620px;margin:auto;padding-left:0;height: 66px">
            <li class="fl"><a href="">作品<span> 0</span></a></li>
            <li class="fl"><a href="">收藏</a></li>
            <li class="fl"><a href="">点攒</a></li>
            <li class="fl"><a href="">评论</a></li>
            <li class="fl"><a href="">个人资料</a></li>
            <li class="fl"><a href="">修改密码</a></li>
        </ul>
    </nav>
    <main>
        <form class="layui-form" action="/user/profile/addpost.html" method="post">
            <div class="container clearfix">
                <article class="fl ttj">
                    <!--<button class="tj" type="button" id="test2">添加图片</button>
                  <p class="xianzhi">大小：<span>小于10MB</span>格式：JPEG/PNG/GIF</p>-->
                    <div class="layui-upload">
                        <article class="fl clearfix" style="margin-top:10px;">
                            <ul class="fl" id="demo2">

                                <button type="button" class="tj" id="test2" style="background-image: none; width: 240px;
                                height: 66px; border: none;">添加图片</button>
                                <input class="layui-upload-file" type="file" accept="undefined" name="file" multiple="">
                                <p class="qwe" style="display: block;">大小：<span>小于10MB</span>格式：JPEG/PNG/GIF</p>
                            </ul>
                            <!--<button type="button" class="layui-btn" >多图片上传</button>-->

                        </article>
                    </div>
                </article>
                <aside class="fr">
                    <p>标题<span>*</span></p>
                    <input class="kuang" name="title" type="text" value="">
                    <p>作品分类<span>*</span></p>
                    <select class="wid kuang" name="wid" style="display:block;">
                        <option value="">选择分类</option>
                        <option value="1">人文</option>
                        <option value="2">科技</option>
                        <option value="3">风景</option>
                        <option value="4">旅游</option>
                        <option value="5">自然</option>
                        <option value="6">亲子</option>
                        <option value="7">汽车</option>
                        <option value="8">艺术</option>
                        <option value="9">航拍</option>
                        <option value="10">手机</option>
                        <option value="11">静物</option>
                        <option value="12">红外</option>
                        <option value="13">建筑</option>
                        <option value="14">微距</option>
                        <option value="15">黑白</option>
                        <option value="16">动物</option>
                        <option value="17">创意</option>
                        <option value="18">美食</option>
                        <option value="19">旅行</option>
                        <option value="20">植物</option>
                        <option value="21">鸟类</option>
                        <option value="22">人像</option>
                        <option value="23">纪实</option>
                        <option value="24">风景</option>
                    </select>
                    <p>描述<span>*</span></p>
                    <textarea name="depict" rows="6" cols="41" placeholder="请输入作品描述"></textarea>
                    <p>标签</p>
                    <input class="kuang" name="tag" type="text" value="" placeholder="请输入标签">
                    <button class="js-ajax-submit" lay-submit="" lay-filter="login" type="submit">发布作品</button>
                    <p class="tianjia">已添加<span id="num">0</span>/<span style="color:red;">20</span></p>
                </aside>
            </div>
        </form>
    </main>
</section>
<script type="text/html" id="files-item-tpl">
    <li class="fl" id="img_box_{index}">
        <div class="xianzhi">
            <div class="img-xian">
                <img src="{preview_url}"  data-index="{index}" alt="{file_name}" class="layui-upload-img" onclick="set_top(this)">
                <div class="di">
                    <!--<a class="set_top fl"  href="javascript:void(0)" >设为封面</a>-->
                    <input class="set_top_val" id="istop_{index}" type="hidden" name="more[istop][]" value="0">
                    <!--<span class="fl" style="padding-top:10px;">|</span>-->
                    <a class="fl" href="javascript:void(0)" onclick="remove('{index}')">删除图片</a>
                </div>
            </div>
            <div class="biao">
                <img src="/themes/index/public/assets/images/xingbiao.png" alt="">
            </div>
            <input type="text" name="more[miaoshu][]" placeholder="请输入描述">
            <input  type="hidden" name="more[img][]" value="{url}">
        </div>
    </li>
</script>
<script>
    var shu=0;

    setInterval(function(){
        var lis=document.querySelectorAll("#demo2 li");
        shu=lis.length;
//		console.log(shu);
        var test=document.querySelector("#test2");
        var qwe=document.querySelector(".qwe");
        var sc=document.querySelector(".sc");
        var tj=document.querySelector(".tj");
        if(lis.length == 0){
            test.className="tj";
            test.style.backgroundImage="none";
            test.style.width="240px";
            test.style.height="66px";
            test.innerHTML="添加图片";
            qwe.style.display="block";
        }else if(lis.length >=20){
            test.style.display="none";
            qwe.style.display="none";
        }else{
            test.className="fl sc";
            test.style.width="260px";
            test.style.height="260px";
            test.style.border="none";
            test.style.backgroundImage="url(\thttp://www.shumasheying.org.cn/themes/index/public/assets/images/xingbiao.png\n)";
            test.innerHTML="";
            qwe.style.display="none";
        }
        var setTop=document.querySelectorAll(".set_top_val");
//		var biao=document.querySelectorAll(".biao");
        var bbiao=document.querySelectorAll(".biao")
        for(var i=0;i<setTop.length;i++){
            setTop[i].aa=i;
//			console.log(setTop[i].value);
            if(setTop[i].value == 1){
                bbiao[i].style.display="block";
            }else{
                bbiao[i].style.display="none";
            }
        }
    })
</script>
<script type="text/javascript">
    var poi =0;
    var num = 0;
    var max_num = 20;

    layui.use('upload', function(){

        var $ = layui.jquery
            ,upload = layui.upload;
        upload.render({
            elem: '#test2'
            ,url: "/user/asset/webuploader.html"
            ,multiple: true
            ,field:'file'
            ,size: 1024*10 //限定大小
            ,number: max_num
            ,data:{
                app: 'portal',
                filetype: 'image',
                type: 'image/jpeg'
            }

            ,done: function(res, index, upload){
                upload_tpl('#demo2','files-item-tpl',res,index);
            }
            , allDone: function (obj) { //当文件全部被提交后，才触发
                // console.log(obj.total); //得到总文件数
//      console.log(obj.successful); //请求成功的文件数
                // console.log(obj.aborted); //请求失败的文件数
                var yyut=document.querySelectorAll(".set_top_val");
                if(poi == 0){
                    yyut[0].value=1;
                }
                poi++;
//      console.log(poi);
            }
        });
    });

    /**
     * obj 注入id对象
     * tpl tpl模板声明
     * res 上传后返回res json
     * index 索引
     */
    function upload_tpl(obj, tplid, res, index) {
        if (res.code != 1) {
            layer.msg(res.msg);
            return;
        }
        num = 1+num;
        if(num > max_num ){
            num = num-1;
            $('#num').html(num);
            // console.log(num);
            return;
        }
        $('#num').html(num);
        var tpl = $('#' + tplid).html();
        var html = '';
        var itemtpl = tpl;
        var container_selector = $(obj);
        var data = res.data;
        itemtpl = itemtpl.replace(/\{preview_url\}/g, data.preview_url);
        itemtpl = itemtpl.replace(/\{file_name\}/g, data.name);
        itemtpl = itemtpl.replace(/\{index\}/g, index);
        itemtpl = itemtpl.replace(/\{url\}/g, data.filepath);
        html += itemtpl;
        $(container_selector).prepend(html);

    }


    function set_top(o) {
        var biaos=document.querySelectorAll(".biao");
        var index = $(o).data('index');
        var obj = $('#istop_' + index);
        var val = obj.val();
        var v = val == 0 ? 1 : 0;
        obj.val(v);
        $('.set_top_val').not(obj).val('0');
    }

    function remove(i) {
        $('#img_box_' + i).remove();
        num = num-1;
//  console.log(num)
        $('#num').html(num);
    }

</script>
<!--脚部区域布局开始-->
<footer>
    <div class="f-container">
        <div class="ftt ">
            <div class="lianxi fy">
                <h3>联系我们</h3>
                <p>北京总部</p>
                <p>地  址：北京市石景山区阜石路166号泽洋大厦713室</p>
                <p>邮  编：100001</p>
                <!--<pre class="pc">电  话：010-52638701 010-52638749  0372-3668876</pre>-->
                <p>E-mail：xinshidaisheyingjia2018@aliyun.com</p>
                <p>安阳分社</p>
                <p>地  址：河南省安阳市万达广场SOHO公寓B座</p>

                <pre class="pc">电  话：0372-5023007  0372-3978876</pre>

            </div>
            <div class="daohang fy">
                <h3>网站导航</h3>
                <ul class="clearfix f-ul">
                    <li class="fl"><a href="/">首页</a></li>
                    <li class="fl"><a href="/activity.html">摄影赛事</a></li>
                    <li class="fl"><a href="/reflex.html">热门影展</a></li>
                    <li class="fl"><a href="/magazine.html">摄影杂志</a></li>
                    <li class="fl"><a href="http://www.sheyingyou.cn/">摄影旅游</a></li>
                    <li class="fl"><a href="/creation.html">用品超市</a></li>
                    <li class="fl"><a href="Javascript:;">资讯动态</a></li>
                    <li class="fl"><a href="Javascript:;">作品&amp;影展</a></li>
                    <li class="fl"><a href="Javascript:;">全国理事会</a></li>
                    <li class="fl"><a href="Javascript:;">会员服务</a></li>
                    <li class="fl"><a href="Javascript:;">关于我们</a></li>
                    <li class="fl"><a href="/sitemap.html">网站地图</a></li>
                </ul>
            </div>
            <div class="erwei fr">
                <img src="http://www.shumasheying.org.cn/upload/admin/20190424/934b656b7173258b84a6c0af2fd940da.jpg">
                <img src="http://www.shumasheying.org.cn/upload/admin/20190424/dabcf8c159d41ed632d0e89f46179016.jpg">
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <p>版权所有 Copyright © 2019 北京天之星文化传媒中心 All Rights Reserved <span>备案序号：<a href="https://beian.miit.gov.cn/" style="color:white;">京ICP备13014113号-4</a></span><span></span> </p>
            <ul class="clearfix">

            </ul>
        </div>
    </div>

    <div style="position: fixed; z-index: 99999; top: 20%; right: 20px;">
        <!-- <a href="http://www.shumasheying.org.cn/celebrity%20interview/977.html"> -->
        <a href="http://www.shumasheying.org.cn/creation.html">
            <img src="/themes/index/public/assets/images/right117.jpg" alt="">
        </a>
    </div>
    <div style="position: fixed; z-index: 99999; top: 20%; left: 20px;">
        <a href="http://www.shumasheying.org.cn/reflex/2440.html">
            <img src="/themes/index/public/assets/images/left117.jpg" alt="">
        </a>
    </div>
</footer>
<!--脚部区域布局结束-->
</body>
</html>